<template>
  <div class="PublicListStyle MkMessageList">
    <mk-search-component :formArr="formArr"  inputPlaceholder = "客户编号/客户名称/联系电话" @startSearch="fun_call_search">
    </mk-search-component>
    <div class="gray_bg tabContainer"  v-loading="loadingTab"
         element-loading-text="拼命加载中">
      <el-table
        :data="treatedOrderData.elements"
        style="width: 100%">
        <!--@row-click="messagesCharge"-->
        <el-table-column
          prop="number"
          label="客户编号"
          width="">
        </el-table-column>
        <el-table-column
          width=''
          show-overflow-tooltip
          prop="customerName"
          label="客户名称">
        </el-table-column>
        <el-table-column
          width=''
          show-overflow-tooltip
          prop="type"
          label="客户类型">
          <template slot-scope='scope'>{{scope.row.type | formatType}}</template>
        </el-table-column>
        <el-table-column
          prop="communityName"
          width=''
          show-overflow-tooltip
          label="社区/店铺">
        </el-table-column>
        <el-table-column
          width=''
          show-overflow-tooltip
          prop="contact"
          label="联系人">
        </el-table-column>
        <el-table-column
          width='140'
          show-overflow-tooltip
          prop="contactPhone"
          label="联系电话">
        </el-table-column>
        <el-table-column
          width=''
          show-overflow-tooltip
          prop="totalMsgAmount"
          label="累计充值条数">
        </el-table-column>
        <el-table-column
          width=''
          prop="remainMsgAmount"
          label="剩余短信条数">
        </el-table-column>
        <el-table-column
          width='100'
          prop="充值"
          label="">
          <template slot-scope='scope' >
            <el-button type="text" @click.stop="messagesCharge(scope.row)">充值</el-button>
            <!--<span @click="messagesCharge(scope.row)">充值</span>-->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-if='treatedOrderData.elements.length>0'
                     @current-change="loadData"
                     :current-page="treatedOrderData.page"
                     :page-size="treatedOrderData.size"
                     layout="total, prev, pager, next"
                     :total="treatedOrderData.totalAmount">
      </el-pagination>
    </div>
    <messageCharge :showDialog="dialogVisible" :messageInfo="messageInfo" @closeDialog="closeDialog"></messageCharge>
  </div>
</template>
<script>
  import bannerService from './../../services/banner'
  import { mapState } from 'vuex'
  import messageCharge from './MkMessageCharge.vue'
  export default {
    name: 'MkMessageList',
    props: ['clickFlowTab'],
    components:{messageCharge},
    watch: {
      clickFlowTab(val) {
        if(val==='first'){
          this.loadData();
        }
      }
    },
    filters: {
      formatType(value){
        if(value==='PROPERTY'){
          return '物业客户'
        }else if(value==='MERCHANT'){
          return '商城客户'
        }
      },
    },
    mounted: function () {
      this.$set(this.formArr, 0,{
        formLabel:'客户类型',
        searchName:'type',
        dataType:'string',
        componentType:'Select',
        optionsArr: [
          {name:'物业客户',value:'PROPERTY'},{name:'商城客户',value:'MERCHANT'}
        ]
      })
    },
    activated(){
      this.loadData(1);
    },
    methods: {
      fun_call_search(search,input) {
        this.searchCondition.type = search.type;
        this.searchCondition.search = input;
        this.loadData(1);
      },
      loadData(page) {
        if(page) {
            this.searchCondition['page.pn'] = page;
        }
        this.loadingTab = true;
        bannerService.loadMessageCustome(this.searchCondition, (data) => {
          this.treatedOrderData = data.data;
          this.loadingTab = false;
        })
      },
      messagesCharge(row){
      	this.messageInfo = row;
      	this.dialogVisible = true;
      },
      closeDialog(type){
      	this.dialogVisible = false;
      	if(type) {
          this.loadData();
        }

      },
    },

    data () {
      return {
        formArr:[],
        loadingTab: false,
        dialogVisible:false,
        messageInfo:'',
        searchCondition: {
          'page.pn': 1,
          'page.size': 10,
          search:'',
          type:'',
        },
        treatedOrderData: {
          elements: [
          ],
          page: '',
          size: '',
          totalPages: '',
          totalAmount: ''
        }
      }
    },
  }
</script>
<style lang='less'>
</style>
